<template>
	<view class="page-sbody">
		<!-- 头部导航 -->
		<view v-if="customHeader">
			<view class="page-header">
				<!-- 头部核心 -->
				<my-title :title="title" :color="color" :isback="isback" :isbg="isbg" :isborder="isborder">
					<template slot="right">
						<slot name="right"></slot>
					</template>
				</my-title>
			</view>
			<!-- 占位 view -->
			<view v-if="isbg" :style="{width:'100%', height:(statusBarHeight + headerHeight) + 'px'}"></view>
		</view>
		<!-- 页面主体 -->
		<view class="page-body"> 
			<!-- 是否有头部背景 -->
			<view v-if="isTopBg" class="pa" style="width: 100%;">
				 <slot name="isTopBg"></slot>
			</view> 
			<!-- 内容区 -->
			<view class="pr">
				<slot name="gBody"></slot>
			</view>
		</view>
		<!-- #ifndef APP-PLUS -->
		<view v-if="!isSwitchPage" :style="{width:'100%', height:iphoneXButtomHeight+'px'}"></view>
		<!-- #endif --> 
	</view>
</template>
<script>
import MyTitle from './MyTitle.vue'
export default{
	name:"MyPage",
	components:{MyTitle},
	props:{
		title:{
			type:String,
			default:''
		},
		color:{
			type:String,
			default:'#333'
		},
		isback:{
			type:Boolean,
			default:true
		},  
		isTopBg:{
			type:Boolean,
			default:false
		},  
		isbg:{
			type:Boolean,
			default:true
		},
		isborder:{
			type:Boolean,
			default:false
		},
		customHeader : { type : Boolean, default : true },
		headerHeight : { type : Number,  default : 44 }, 
		isSwitchPage :  { type : Boolean, default : false }, 
	},
	data() {
		return {
			statusBarHeight : 0,
			iphoneXButtomHeight:0,
			BoundingWidth : '0px'
		}
	},
	created:function(){
		try {
		    var res = uni.getSystemInfoSync();
			res.model = res.model.replace(' ', '');
			res.model = res.model.toLowerCase();
			if( res.model && (res.model.indexOf('iphonex')>-1 || res.model.indexOf('iphone11')>-1 || res.model.indexOf('iphone12')>-1 || res.model.indexOf('iphone13')>-1) ){
				this.iphoneXButtomHeight = uni.upx2px(50);
			}
		} catch (e){return null;}
		if(!this.customHeader){return ;}
		// #ifndef MP-ALIPAY
		this.statusBarHeight = res.statusBarHeight;
		// #ifdef MP-WEIXIN
		// 小程序胶囊按钮
		var res  = uni.getMenuButtonBoundingClientRect();
		this.BoundingWidth = (res.width + 20) + 'px';
		// #endif
		// #endif
		this.$emit("getNavHeight",this.getNavHeight())
	},
	methods:{
		getNavHeight(){
			return this.statusBarHeight + this.headerHeight
		}
	}
	
}
</script>

<style lang="scss">
/* #ifndef MP */
page{width:100%; min-height:100%; display:flex; flex-direction:column; flex:1;}
/* #endif */ 
.page-sbody{display:flex; flex-direction:column; width:100%; flex:1;}
/* #ifdef MP */
.page-sbody{min-height:100vh;}
/* #endif */
.page-header{width:100%; position:fixed; left:0; top:0; z-index:99; border-bottom:0px solid #FFFFFF;} 
.page-body{width:100%; flex:1; display:flex; flex-direction:column;} 
</style>
